<script setup>

import {ref,onMounted} from 'vue';
import axios from "axios";

const emp=ref({
  name:'',
  gender:'',
  job:''
})

const userList=ref([])

const search=async () => {
  console.log("查询员工")
  const result = await axios.get(`https://web-server.itheima.net/emps/list?name=${emp.value.name}&gender=
            ${emp.value.gender}&job=${emp.value.job}`)
  userList.value=result.data.data
}
const clear=()=>{
  console.log("清空查询条件")
  emp.value.name=''
  emp.value.gender=''
  emp.value.job=''
  search()
}
onMounted(()=>{
  search()
})
</script>

<template>

  <div id="search-container">
    <el-form :inline="true" :model="emp" class="demo-form-inline">
      <el-form-item label="员工姓名">
        <el-input v-model="emp.name" placeholder="员工姓名" clearable />
      </el-form-item>
      <el-form-item label="员工性别">
        <el-select
            v-model="emp.gender"
            placeholder="性别"
            clearable
        >
          <el-option label="男" value="1" />
          <el-option label="女" value="2" />
        </el-select>
      </el-form-item>
      <el-form-item label="员工职业">
        <el-select
            v-model="emp.job"
            placeholder="工作"
            clearable
        >
          <el-option label="班主任" value="1" />
          <el-option label="讲师" value="2" />
          <el-option label="其他" value="3" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="info" @click="clear">清空</el-button>
      </el-form-item>
    </el-form>
  </div>
<div id="table-container">
  <el-table :data="userList" border style="width: 100%">
    <el-table-column prop="id" label="ID" width="80" align="center"/>
    <el-table-column prop="name" label="姓名" width="120" align="center"/>
    <el-table-column  prop="gender" label="性别" width="80" align="center">
      <template #default="scope">
        <span v-if="scope.row.gender === 1">男</span>
        <span v-else-if="scope.row.gender === 2">女</span>
        <span v-else>其他</span>
      </template>
    </el-table-column>
    <el-table-column prop="image" label="头像" width="240" align="center">
      <template #default="scope">
        <img :src="scope.row.image" height="40px" alt="职工头像">
      </template>
    </el-table-column>
    <el-table-column  prop="job" label="职位" width="100"  align="center">
      <template #default="scope">
        <span v-if="scope.row.job == 1">班主任</span>
        <span v-else-if="scope.row.job == 2">讲师</span>
        <span v-else-if="scope.row.job == 3">学工主管</span>
        <span v-else-if="scope.row.job == 4">教研主管</span>
        <span v-else-if="scope.row.job == 5">咨询师</span>
        <span v-else>其他</span>
      </template>
    </el-table-column>
    <el-table-column prop="entrydate" label="入职日期" width="240" align="center"/>
    <el-table-column prop="updatetime" label="更新时间" align="center" />

    <tr v-for="(user,index) in userList" :key="user.id">
      <td>{{index + 1}}</td>
      <td>{{user.name}}</td>
      <td> <img :src="user.image"> </td>
      <td>
        <span v-if="user.gender === 1">男</span>
        <span v-else-if="user.gender === 2">女</span>
        <span v-else>其他</span>
      </td>
      <td>
        <span v-if="user.job === 1">班主任</span>
        <span v-else-if="user.job === 2">讲师</span>
        <span v-else-if="user.job === 3">学工主管</span>
        <span v-else-if="user.job === 4">教研主管</span>
        <span v-else-if="user.job === 5">咨询师</span>
        <span v-else>其他</span>
      </td>
      <td>{{user.entrydate}}</td>
      <td>{{user.updatetime}}</td>
    </tr>
  </el-table>
</div>

</template>

<style scoped>

table,th,td {
  border: 1px solid #000;
  border-collapse: collapse;
  line-height: 50px;
  text-align: center;
}
#search-container,table{
  width: 60%;
  margin: auto;
}
#search-container{
  border: cornsilk;
  margin-bottom: 20px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
img {
  width: 50px;

}
#table-container{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}

</style>